<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>组件基础</title>
</head>
<body>
    <div id="app">
        <button-counter></button-counter>
        <button-counter></button-counter>
        <button-counter></button-counter>

        <blog-post title="my on1"></blog-post>
        <blog-post title="my on2"></blog-post>
        <blog-post title="my on3"></blog-post>

        <!-- 传递数组 -->
        <blog-post v-for="post in posts" v-bind:key=post.id v-bind:title=post.title>
        </blog-post>

    </div>


    <script type="text/javascript">
    //定义一个Vue组件,组件注册
    Vue.component('button-counter',{
        data:function(){
            return{
                count:0
            }
        },
        template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'

    })
    //通过prop向子组件传递数据
    Vue.component('blog-post',{
        props:['title'],
        template: '<h3>{{ title }}</h3>'
    })
    //监听子组件事件
    Vue.component('blog-post1',{
        props:['post'],
        template:
           
    })
    var vm=new Vue({
        el:"#app",
        data:{
            //传递数组 
           posts:[
                {id:1,title:"1234"},
                {id:2,title:"12356"},
                {id:3,title:"12323"},
            ]
        }
    })
    


    </script>
    
</body>
</html>